<!-- 通知公告 -->
<template>
  <div>
    <van-pull-refresh v-model="isreFreshLoading"
                      @refresh="onRefresh"
                      :success-duration="500"
                      :success-text='`刷新成功，加载${items.length} 条记录`'>
      <van-list v-model:loading="loading"
                v-model:error="error"
                :finished="finished"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="load">
        <template v-for="(item, index) in items"
                  :key="index">
          <div class="report-date">{{item.date}}</div>
          <list-card v-for="(report, queue) in item.node"
                     :key="queue">
            <template #title>
              <span v-if="report.duplicate"
                    class="duplicate">库中存在同名论文</span>
              <span class="title">{{report.title}}</span>
            </template>
            <template #content>
              <div class="overview">
                <span>{{report.content}}</span>
              </div>
              <div class="detail">
                <span>{{report.date}}</span>
                <span @click="$router.push('/messagePaperDetail')">查看详情 ></span>
              </div>
            </template>
          </list-card>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ListCard from '@/components/ListCard.vue'
import { usePullRefresh } from '@/hooks/usePullRefresh.js'
import { reactive, ref, onMounted, toRefs } from 'vue'
import { getPaperSent } from "@/api/request/basic"

export default {
  components: {
    ListCard
  },
  setup () {
    const { state, load, onRefresh, initPullRefresh } = usePullRefresh()
    onMounted(() => {
      initPullRefresh({ request: getPaperSent })
      load()
    })
    return {
      load,
      onRefresh,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>
.ep-card-left-icon {
  align-self: flex-start;
}
.report-date {
  text-align: center;
  background: #f7f7f7;
  color: #969799;
  line-height: 33px;
}

.overview {
  border-bottom: 1px solid whitesmoke;
  padding-bottom: 12px;
}

.detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width: 100%;
  line-height: 28px;
}

.duplicate {
  background: #fff3eb;
  border-radius: 2px;
  color: #ff8b36;
  padding: 1px 9px;
}

.title {
  color: #000000;
  line-height: 13px;
  /* font-weight: bold; */
  font-size: 14px;
}
</style>